<template>
  <!-- 打印表格 Start -->
  <table class="batch-table">
    <thead
      style="display: table-header-group"
      v-if="
        (lastItem && lastItem.IsPaging != false) ||
        (!lastItem && item.JobTempletIndex >= 1)
      "
    >
      <tr style="width: 100%">
        <td>
          <div class="header-show">
            <ul class="ul-header">
              <li class="li-img">
                <img src="@/assets/img/nbclogo.png" alt="" />
              </li>
              <li class="li-no">
                <span>文件编号:{{ mateCurrentInfo.JobGroupNo || "/" }}</span>
                <span
                  >版次:{{ mateCurrentInfo.JobTempletVisionOut || "/" }}</span
                >
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </thead>
    <!-- 填写记录循环主题 body Start -->
    <tbody class="batch-tbody is-unshow-group">
      <tr
        style="border: none"
        v-if="mateCurrentInfo && !lastItem && item.JobTempletIndex >= 1"
      >
        <td style="border: none; text-align: center">
          <h3 style="text-align: center">{{ mateCurrentInfo.JobGroupName }}</h3>
        </td>
      </tr>
      <tr
        style="border: none; margin-bottom: 0.625rem"
        v-if="
          (lastItem && lastItem.IsPaging != false) ||
          (!lastItem && item.JobTempletIndex >= 1 && !flag)
        "
      >
        <td style="border: none; text-align: center">
          {{ item.JobTempletName }}
        </td>
      </tr>
      <tr
        v-for="(litem, index) in list"
        :key="index"
        :class="[
          list[index + 1] && list[index + 1].JobType == 10
            ? 'article-bottom'
            : '',
          item.IsUnShowGroup ? 'is-show-group' : '',
          list.length % 2 !== 0 && index == list.length - 1
            ? 'is-all-group'
            : '',
        ]"
      >
        <!-- 批记录说明 Start -->
        <td v-if="litem && litem.JobGroup.length > 0 && !item.IsUnShowGroup">
          <header>
            <div class="batch-info-box">
              <p v-for="(pdata, pidx) in litem.JobGroup" :key="pidx">
                {{ pdata }}
              </p>
            </div>
          </header>

          <section v-show="litem.JobItemDesc">
            <span> {{ litem.JobItemDesc }}</span>
          </section>
        </td>
        <!-- 批记录说明 End -->
        <td v-if="checkNotes(litem.JobRecordDetailList)">
          <!-- 批记录填写项展示 Start -->
          <section
            v-for="itm in litem.JobRecordDetailList"
            :key="itm.JobItemID"
          >
            <!-- 多选框 -->
            <multiple-box :item="itm" v-if="itm.DataTypeIndex == 2">
            </multiple-box>

            <!-- 多选框 -->
            <!-- 图片,签名展示框 -->
            <png-box
              :item="itm"
              v-if="itm.DataTypeIndex == 8 || itm.DataTypeIndex == 9"
              :isTemplate="isTemplate"
              :currentValue="currentValue"
            ></png-box>
            <!-- 图片,签名展示框 -->

            <!-- 单选框展示 -->
            <radio-box :item="itm" v-if="itm.DataTypeIndex == 1"></radio-box>
            <!-- 单选框展示 -->

            <span
              v-if="
                itm.DataTypeIndex != 8 &&
                itm.DataTypeIndex != 9 &&
                itm.DataTypeIndex != 2 &&
                itm.DataTypeIndex != 1 &&
                itm.DataTypeIndex != 10
              "
            >
              {{ itm.JobItemName }}
              <span :class="[itm.SectionResultStr ? 'text-underline' : '']">
                {{ itm.SectionResultStr|| "/" }}
              </span>
            </span>
            <span v-show="itm.DataTypeIndex == 10">{{ itm.DefaultValue }}</span>
          </section>
          <!-- 批记录填写项展示 End -->
        </td>
      </tr>
    </tbody>
    <!-- 填写记录循环主题 body End -->
  </table>
  <!-- 打印表格 End -->

  <!-- 打印每页页眉 Start -->
  <!-- <div class="header">
      <header>
        <img src="@/assets/img/nbclogo.png" alt="" />
      </header>
      <h1>{{ item.JobTempletName }}</h1>
    </div> -->
  <!-- 打印每页页眉 End -->
</template>

<script>
import MultipleBox from "../assembly/Multiple.vue"; //多选
import PngBox from "../assembly/noPngBox.vue"; //图片展示
import RadioBox from "../assembly/Radio.vue"; //单选
import { getConfig } from "@/api/ConfigApi/index";
export default {
  components: {
    MultipleBox,
    PngBox,
    RadioBox,
  },
  props: ["list", "item", "flag", "lastItem", "mateCurrentInfo", "isTemplate"],
  data() {
    return {
      currentValue: null,
    };
  },
  methods: {
    /* 检验是否为纯数字的字符串 */
    isNUmber(num) {
      return /^[0-9]+.?[0-9]*$/.test(num);
    },
    /* 清零 */
    removeTrailingZeros(number) {
      if (!this.isNUmber(number)) {
        if (number === "" || number === null || number === undefined) {
          return "/";
        } else {
          return number;
        }
      }
      if (number === "" || number === null || number === undefined) {
        return 0;
      } else {
        if (number.toString().includes(".")) {
          // parseFloat会自动去掉0 Number()也可以
          let str = "" + parseFloat(number);
          return str;
        } else {
          return number;
        }
      }
    },

    /* 签名方向 */
    async openFun() {
      let res = await getConfig("启用横向批记录签名");
      this.currentValue = res.Data.ConfigValue;
    },
    /* 查找是否存在备注 */
    checkNotes(list) {
      if (list && list.length > 0) {
        if (
          list.find((item) => item.DataTypeName == "备注") ||
          list.find(
            (item) =>
              item.JobItemName == " " ||
              item.JobItemName == null ||
              item.JobItemName == undefined
          )
        ) {
          return false;
        } else {
          return true;
        }
      }
    },
  },
  mounted() {
    this.openFun();
  },
};
</script>

<style lang="less" scoped>
.is-unshow-group {
  display: flex;
  flex-wrap: wrap;
}
.is-show-group {
  width: 50% !important;
}
.is-all-group {
  width: 100% !important;
}
.batch-table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;

  /* 表格主体 */
  .batch-tbody {
    padding: 0.625rem 0;

    /* 表格每行 */
    tr {
      border: 1px solid #000;
      display: flex;
      border-collapse: collapse;
      width: 100%;
      page-break-inside: avoid;
      margin: -0.0625rem 0px -0.0625rem 0px;
      color: #000000 !important;
      font-size: 0.8125rem !important;

      /* 表格每行左右列 */
      td {
        flex: 1;
        padding: 0.3125rem 0.625rem;
        color: #000000 !important;
        font-size: 0.8125rem !important;
        //word-break: break-word;
      }

      td:nth-child(1) {
        border-right: 1px solid #000;
      }
    }

    .table-name {
      display: none;
      width: 100% !important;
      border: none !important;
      page-break-inside: unset !important;

      .table-name-td {
        border: none !important;
        width: 100% !important;
        text-align: center !important;
      }
    }
  }
}

/* 打印展示项  页眉css */
.header-show {
  display: none;

  .ul-header {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.625rem;

    border-bottom: 1px solid #787777;

    .li-img {
      flex: 2;

      img {
        height: 3.125rem;
        width: 9.375rem;
        page-break-inside: avoid;
      }
    }

    .li-no {
      font-size: 0.875rem !important;
      flex: 1;
      display: flex;
      justify-content: space-around;
    }
  }
}

.article-bottom {
  border-bottom: 1px solid #000;
  margin-bottom: 1.25rem !important;
}

.batch-info-box {
  p {
    margin-bottom: 0.3125rem;
  }
}
</style>
